<template>
  <div class="vtable">
    <el-table :data="data" v-bind="currentTableConfig" highlight-current-row v-on="$listeners" ref="table">
      <template v-for="colConfig in currentColConfigs">
        <VCol
          :colConfig="colConfig"
          :key="colConfig._uid"
          @handleBtnClick="handleBtnClick"
          v-if="colConfig.visible !== false"
        ></VCol>
      </template>
    </el-table>
  </div>
</template>

<script>
import VCol from './VCol';
import { createUUID } from '@/utils/util';

export default {
  name: 'VTable',
  components: {
    VCol,
  },
  inheritAttrs: false,
  props: {
    /**
     * 表格数据
     */
    data: {
      type: Array,
      required: true,
    },

    /**
     * 列配置项
     */
    columnList: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  data() {
    return {
      currentColConfigs: [],
    };
  },

  watch: {
    columnList: {
      handler() {
        this.currentColConfigs = this.extendColConfigs(this.columnList);
      },
      deep: true,
      immediate: true,
    },
  },

  computed: {
    table() {
      return this.$refs.table;
    },
    currentTableConfig() {
      const { $attrs } = this;

      return {
        size: 'small',
        ...$attrs,
      };
    },
  },

  methods: {
    extendColConfigs(columnList) {
      const defualtColConfig = {
        showOverflowTooltip: true,
        align: 'center',
        formatter(row, column, cellValue) {
          return typeof cellValue === 'undefined' || cellValue === null ? '-' : cellValue;
        },
      };

      return columnList.map(item => {
        // update
        item._uid = createUUID();

        if (item.sortable === true && !item.sortMethod && item.sortType === 'front') {
          item.sortMethod = (a, b) => {
            let valueA = a[item.prop] || '';
            let valueB = b[item.prop] || '';

            if (item.formatter) {
              valueA = item.formatter(a, item, valueA);
              valueB = item.formatter(b, item, valueB);
            }

            valueA = Number(valueA.replace(/[^0-9.-]/gi, ''));
            valueB = Number(valueB.replace(/[^0-9.-]/gi, ''));

            // 非数字
            if (isNaN(valueA) && isNaN(valueB)) {
              return 0;
            }
            if (isNaN(valueA)) {
              return -1;
            }
            if (isNaN(valueB)) {
              return 1;
            }

            return valueA - valueB;
          };
        }

        if (item.children) {
          return {
            ...item,
            ...defualtColConfig,
            children: this.extendColConfigs(item.children),
          };
        }

        return { ...defualtColConfig, ...item };
      });
    },
    handleBtnClick(key, row, rowIndex) {
      this.$emit('handleBtnClick', key, row, rowIndex);
    },

    /**
     * 显示列筛选排序弹框
     *
     * @public
     */
    showColFilterDialog() {
      this.$refs.vColFilterDialog.show();
    },

    handleFilterColumns(columnList) {
      this.currentColConfigs = columnList;
    },
  },

  mounted() {},

  created() {},
};
</script>
<style lang="scss" scoped>
.vtable ::v-deep {
  .el-button + .el-popconfirm-btn {
    margin-left: 10px;
  }
}
</style>
